﻿
$(function () {
echarts_1();
echarts_2();
echarts_4();
echarts_31();
echarts_32();
echarts_33();
echarts_5();
// echarts_6();
    function echarts_1() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart1'));
        var data = {};

        var option = {
            // echarts图表配置
            // 其他配置项...
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '0%',
                top:'10px',
                right: '0%',
                bottom: '4%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['>50', '50-100', '100-150', '150-200', '200-250', '250-300', '>300'],
                nameLocation: 'middle',
                nameTextStyle: {},
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [
                {
                    type: 'bar',
                    data: [],
                    barWidth: '35%',
                    itemStyle: {
                        normal: {
                            color: '#2f89cf',
                            opacity: 1,
                            barBorderRadius: 5,
                        }
                    }
                }
            ]
        };

        $.ajax({
            url: '/blockchain-kindness/donations/getAll', // 替换为实际的数据接口地址
            type: 'GET',
            success: function(response) {
                data = data = response.data.donationsIntervalDTO.map(item => item.counts);
                option.series[0].data = data;
                myChart.setOption(option);
            },
            error: function(error) {
                console.error('Failed to fetch data:', error);
            }
        });

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    }

// 初始化echarts图表
    function echarts_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));

        $.ajax({
            url : '/blockchain-kindness/donations/getAll',
            type : 'GET',
            success(resp){
                var data = resp.data.donationsPurposeDTO.map(item => item.totalAmount);
                option = {
                    //  backgroundColor: '#00265f',
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { type: 'shadow'}
                    },
                    grid: {
                        left: '0%',
                        top:'10px',
                        right: '0%',
                        bottom: '4%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['社会救助与福利', '教育与文化发展', '环境保护与可持续发展'],
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                                width: 1,
                                type: "solid"
                            },
                        },

                        axisTick: {
                            show: false,
                        },
                        axisLabel:  {
                            interval: 0,
                            // rotate:50,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: '12',
                            },
                        },
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            //formatter: '{value} %'
                            show:true,
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: '12',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255,255,255,.1	)",
                                width: 1,
                                type: "solid"
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                            }
                        }
                    }],
                    series: [
                        {

                            type: 'bar',
                            data: [1500, 1200, 600, 200, 300, 300, 900],
                            barWidth:'35%', //柱子宽度
                            // barGap: 1, //柱子之间间距
                            itemStyle: {
                                normal: {
                                    color:'#27d08a',
                                    opacity: 1,
                                    barBorderRadius: 5,
                                }
                            }
                        }

                    ]
                };
                option.series[0].data = data
                myChart.setOption(option);
                window.addEventListener("resize",function(){
                    myChart.resize();
                });
            }
        })
    }
function echarts_5() {
        // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById('echart5'));
       $.ajax({
           url : "/blockchain-kindness/donations/getAll",
           type : 'GET',
           success(resp){
               const data = resp.data.donationsSatisfactionDTO.map(item => item.count);
               option = {
                   //  backgroundColor: '#00265f',
                   tooltip: {
                       trigger: 'axis',
                       axisPointer: {
                           type: 'shadow'
                       }
                   },

                   grid: {
                       left: '0%',
                       top:'10px',
                       right: '0%',
                       bottom: '2%',
                       containLabel: true
                   },
                   xAxis: [{
                       type: 'category',
                       data: ['1', '2', '3', '4', '5', '6', '7', '8','9','10'],
                       axisLine: {
                           show: true,
                           lineStyle: {
                               color: "rgba(255,255,255,.1)",
                               width: 1,
                               type: "solid"
                           },
                       },

                       axisTick: {
                           show: false,
                       },
                       axisLabel:  {
                           interval: 0,
                           // rotate:50,
                           show: true,
                           splitNumber: 15,
                           textStyle: {
                               color: "rgba(255,255,255,.6)",
                               fontSize: '12',
                           },
                       },
                   }],
                   yAxis: [{
                       type: 'value',
                       axisLabel: {
                           //formatter: '{value} %'
                           show:true,
                           textStyle: {
                               color: "rgba(255,255,255,.6)",
                               fontSize: '12',
                           },
                       },
                       axisTick: {
                           show: false,
                       },
                       axisLine: {
                           show: true,
                           lineStyle: {
                               color: "rgba(255,255,255,.1	)",
                               width: 1,
                               type: "solid"
                           },
                       },
                       splitLine: {
                           lineStyle: {
                               color: "rgba(255,255,255,.1)",
                           }
                       }
                   }],
                   series: [{
                       type: 'bar',
                       data: [],
                       barWidth:'35%', //柱子宽度
                       // barGap: 1, //柱子之间间距
                       itemStyle: {
                           normal: {
                               color:'#2f89cf',
                               opacity: 1,
                               barBorderRadius: 5,
                           }
                       }
                   }
                   ]
               };
               option.series[0].data = data
               myChart.setOption(option);
               window.addEventListener("resize",function(){
                   myChart.resize();
               });
           }
       })
        // 使用刚指定的配置项和数据显示图表。
    }

function echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart4'));
        let data2020 = [];
        let data2021 = [];
        let data2022 = [];
        let data2023 = [];
        let data2024 = [];
    // 使用Ajax获取数据
    $.ajax({
        url: '/blockchain-kindness/donations/getAll',
        type: 'GET',
        success(resp){
            resp.data.donationsMonthTrendDTO.forEach(item => {
                if (item.year === 2020) {
                    data2020.push(item.amounts);
                } else if (item.year === 2021) {
                    data2021.push(item.amounts);
                } else if (item.year === 2022) {
                    data2022.push(item.amounts);
                } else if (item.year === 2023) {
                    data2023.push(item.amounts);
                }else if(item.year === 2024)
                    data2024.push(item.amounts)
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            lineStyle: {
                                color: '#dddc6b'
                            }
                        }
                    },
                    legend: {
                        top:'0%',
                        data: ['2020', '2021', '2022', '2023', '2024'],
                        textStyle: {
                            color: 'rgba(255,255,255,.5)',
                            fontSize:'12',
                        }
                    },
                    grid: {
                        left: '10',
                        top: '30',
                        right: '10',
                        bottom: '10',
                        containLabel: true
                    },

                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        axisLabel:  {
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize:12,
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,.2)'
                            }

                        },

                        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']

                    }, {

                        axisPointer: {show: false},
                        axisLine: {  show: false},
                        position: 'bottom',
                        offset: 20,



                    }],

                    yAxis: [{
                        type: 'value',
                        axisTick: {show: false},
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,.1)'
                            }
                        },
                        axisLabel:  {
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize:12,
                            },
                        },

                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,.1)'
                            }
                        }
                    }],
                    series: [
                        {
                            name: '2020',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            symbolSize: 5,
                            showSymbol: false,
                            lineStyle: {

                                normal: {
                                    color: '#0184d5',
                                    width: 2
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(1, 132, 213, 0.4)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(1, 132, 213, 0.1)'
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#0184d5',
                                    borderColor: 'rgba(221, 220, 107, .1)',
                                    borderWidth: 12
                                }
                            },
                            data: []

                        },
                        {
                            name: '2021',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            symbolSize: 5,
                            showSymbol: false,
                            lineStyle: {

                                normal: {
                                    color: '#00d887',
                                    width: 2
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(0, 216, 135, 0.4)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(0, 216, 135, 0.1)'
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#00d887',
                                    borderColor: 'rgba(221, 220, 107, .1)',
                                    borderWidth: 12
                                }
                            },
                            data:  []

                        },
                        {
                            name: '2022',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            symbolSize: 5,
                            showSymbol: false,
                            lineStyle: {
                                normal: {
                                    color: '#FF0000', // 红色
                                    width: 2
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#FF0000' // 红色
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(255, 0, 0, 0.1)' // 红色的透明色
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#FF0000', // 红色
                                    borderColor: 'rgba(221, 220, 107, .1)',
                                    borderWidth: 12
                                }
                            },
                            data:  []

                        },
                        {
                            name: '2023',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            symbolSize: 5,
                            showSymbol: false,
                            lineStyle: {

                                normal: {
                                    color: '#00d887',
                                    width: 2
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(0, 216, 135, 0.4)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(0, 216, 135, 0.1)'
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#00d887',
                                    borderColor: 'rgba(221, 220, 107, .1)',
                                    borderWidth: 12
                                }
                            },
                            data:[]

                        },
                        {
                            name: '2024',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            symbolSize: 5,
                            showSymbol: false,
                            lineStyle: {
                                normal: {
                                    color: '#964B00', // 将颜色替换为褐色
                                    width: 2
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(150, 75, 0, 0.4)' // 将颜色替换为褐色
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(150, 75, 0, 0.1)' // 将颜色替换为褐色
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#964B00', // 将颜色替换为褐色
                                    borderColor: 'rgba(221, 220, 107, .1)',
                                    borderWidth: 12
                                }
                            },
                            data: []
                        }
                    ]

                };
            });
            option.series[0].data = data2020
            option.series[1].data = data2021
            option.series[2].data = data2022
            option.series[3].data = data2023
            option.series[4].data = data2024
            myChart.setOption(option)
        }
    })}
// function echarts_6() {
//         // 基于准备好的dom，初始化echarts实例
//         var myChart = echarts.init(document.getElementById('echart6'));
//         var data = [10, 20, 30, 40, 50];
//
// // 定时器，每隔一段时间更新数据
//     setInterval(function() {
//         // 模拟数据更新
//         data.shift(); // 移除第一个数据
//         var newData = Math.round(Math.random() * 100); // 生成新数据
//         data.push(newData); // 添加新数据
//
//         // 更新图表
//         myChart.setOption({
//             xAxis: {
//                 data: ['A', 'B', 'C', 'D', 'E'] // 假设横坐标是固定的
//             },
//             series: [{
//                 type: 'bar',
//                 data: data // 更新数据
//             }]
//         });
//     }, 2000); // 每隔2秒更新一次
//     }
function echarts_31() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('fb1'));
        $.ajax({
            url : "/blockchain-kindness/donations/getAll",
            type : "GET",
            success(resp){
                const data = resp.data.donationsPurposeDetailPercentDTO.slice(0,5).map(item => ({
                    value: item.percent,
                    name: item.name,
                }));
                option = {

                    title: [{
                        text: '社会救助与福利',
                        left: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize:'16'
                        }

                    }],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)",
                        position:function(p){   //其中p为当前鼠标的位置
                            return [p[0] + 10, p[1] - 10];
                        }
                    },
                    legend: {

                        top:'70%',
                        itemWidth: 10,
                        itemHeight: 10,
                        data:['生活救助','医疗救助','教育救助','住房救助','灾害救助'],
                        textStyle: {
                            color: 'rgba(255,255,255,.5)',
                            fontSize:'12',
                        }
                    },
                    series: [
                        {
                            name:'年龄分布',
                            type:'pie',
                            center: ['50%', '42%'],
                            radius: ['40%', '60%'],
                            color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
                            label: {show:false},
                            labelLine: {show:false},
                            data:[
                                {value:1, name:'生活救助'},
                                {value:4, name:'医疗救助'},
                                {value:2, name:'教育救助'},
                                {value:2, name:'住房救助'},
                                {value:1, name:'灾害救助'},
                            ]
                        }
                    ]
                };
                option.series[0].data = data;
                myChart.setOption(option);
                window.addEventListener("resize",function(){
                    myChart.resize();
                });
            }
        })
        // 使用刚指定的配置项和数据显示图表。
    }
function echarts_32() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('fb2'));
    $.ajax({
        url: "/blockchain-kindness/donations/getAll",
        type: "GET",
        success(resp) {
            const data = resp.data.donationsPurposeDetailPercentDTO.slice(5, 10).map(item => ({
                value: item.percent,
                name: item.name,
            }));
            option = {

                title: [{
                    text: '教育与文化发展',
                    left: 'center',
                    textStyle: {
                        color: '#fff',
                        fontSize:'16'
                    }

                }],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                    position:function(p){   //其中p为当前鼠标的位置
                        return [p[0] + 10, p[1] - 10];
                    }
                },
                legend: {

                    top:'70%',
                    itemWidth: 10,
                    itemHeight: 10,
                    data:['教育捐赠','奖助学金','师资奖励','学科建设','教育创新'],
                    textStyle: {
                        color: 'rgba(255,255,255,.5)',
                        fontSize:'12',
                    }
                },
                series: [
                    {
                        name:'年龄分布',
                        type:'pie',
                        center: ['50%', '42%'],
                        radius: ['40%', '60%'],
                        color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
                        label: {show:false},
                        labelLine: {show:false},
                        data:[
                        ]
                    }
                ]
            };
            option.series[0].data = data
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    })
}
function echarts_33() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('fb3'));
    $.ajax({
        url: "/blockchain-kindness/donations/getAll",
        type: "GET",
        success(resp) {
            const data = resp.data.donationsPurposeDetailPercentDTO.slice(10, 15).map(item => ({
                value: item.percent,
                name: item.name,
            }));
            option = {
                title: [{
                    text: '生态与环境',
                    left: 'center',
                    textStyle: {
                        color: '#fff',
                        fontSize:'16'
                    }

                }],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                    position:function(p){   //其中p为当前鼠标的位置
                        return [p[0] + 10, p[1] - 10];
                    }
                },
                legend: {
                    top:'70%',
                    itemWidth: 10,
                    itemHeight: 10,
                    data:['生态保护','清洁能源','环保教育','环保科研','贫困地区环境改善'],
                    textStyle: {
                        color: 'rgba(255,255,255,.5)',
                        fontSize:'12',
                    }
                },
                series: [
                    {
                        name:'生态与环境',
                        type:'pie',
                        center: ['50%', '42%'],
                        radius: ['40%', '60%'],
                        color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
                        label: {show:false},
                        labelLine: {show:false},
                        data:[
                            {value:2, name:'生态保护'},
                            {value:3, name:'清洁能源'},
                            {value:1, name:'环保教育'},
                            {value:4, name:'环保科研'},
                            {value:8, name:'环境改善'},
                        ]
                    }
                ]
            };
            option.series[0].data = data;
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
    })
        // 使用刚指定的配置项和数据显示图表。
    }


})


















